<template>
  <div>
    <el-form :inline="true" size="mini" @submit.native.prevent>
      <el-form-item>
        <el-popover v-model="visible" placement="top">
          <p>确定归集ETH</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button size="mini" type="primary" @click="Collection">确定</el-button>
          </div>
          <el-button slot="reference" size="mini" type="success">ETH归集</el-button>
        </el-popover>
      </el-form-item>
    </el-form>
    <div class="main">
      <el-table v-loading="loading" :data="list">
        <el-table-column prop="group_name" label="分组名称"/>
        <el-table-column prop="explain" label="配置说明"/>
        <el-table-column label="配置范围">
          <template slot-scope="scope">
            <span>{{ scope.row.unit_before + scope.row.min + scope.row.unit_after }}</span>
            <span>~</span>
            <span>{{ scope.row.unit_before + scope.row.max + scope.row.unit_after }}</span>
          </template>
        </el-table-column>
        <el-table-column label="当前配置">
          <template slot-scope="scope">
            <span style="color: red;">{{ scope.row.unit_before + scope.row.content + scope.row.unit_after }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">

            <el-popover v-model="scope.row.showEdit" placement="left">

              <el-form size="mini" @submit.native.prevent="ChangeConfig(scope.row)">
                <el-form-item label="修改配置">
                  <el-input v-model="scope.row.nowContent" >
                    <template slot="prepend">{{ scope.row.unit_before }}</template>
                    <template slot="append">{{ scope.row.unit_after }}</template>
                  </el-input>
                </el-form-item>
                <el-form-item style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="scope.row.showEdit = false">取消</el-button>
                  <el-button size="mini" type="primary" native-type="submit">确定</el-button>
                </el-form-item>
              </el-form>

              <el-button slot="reference" size="mini" type="default">修改</el-button>

            </el-popover>

          </template>
        </el-table-column>
      </el-table>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      visible: false
    }
  },
  mounted() {
    this.GetList()
  },
  methods: {
    /**
     *  获取列表
     */
    GetList() {
      this.$http.get('system-configs')
        .then(response => {
          this.list = response.resource
          this.loading = false
        })
    },
    /**
     * 修改配置
     */
    ChangeConfig(vo) {
      const params = {
        now_content: vo.nowContent
      }
      this.$http.patch('system-configs/' + vo.id, params)
        .then(response => {
          this.GetList()
          this.$success('操作成功')
        })
        .catch(response => {
          this.$error(response.data.message)
        })
    },

    /**
     *  ETH归集
     */
    Collection() {
      this.$http
        .post('asset-recycle-eth')
        .then(response => {
          this.GetList(this.listInfo.current_page, this.listInfo.per_page)
          this.$success('操作成功')
        })
        .catch(response => {
          this.$error(response)
        })
    }
  }
}
</script>
